<template>
  <div class="fasong1">
    <div class="zuijabuzou">追加一个步骤</div>
    <div class="fasong">
      <div class="xiaotieshi">小贴士</div>
      <input
        type="text"
        class="xiaotieshitext"
        placeholder="点击添加小贴士"
        v-model="xiaotip"
      />
    </div>
    <div class="fabu">
      <button class="fabu1" @click.stop="fasongcaipu1">发布菜谱</button>
      <button class="fabu2" @click.stop="quxiaocaipu1">存为草稿</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xiaotip: "",
      dataarr: "",
    };
  },
  props: [
    "title1",
    "filessend2",
    "msng",
    "miaoshutext",
    "zuofa1",
    "zuofa2",
    "zuofa3",
    "zuofa4",
    "zuofa5",
    "filesend1",
    "filesend2",
    "filesend3",
    "filesend4",
    "filesend5",
    "biapyi1",
    "biapyi2",
    "biapyi3",
    "biapyi4",
    "biapyi5",
    "biapyi6",
    "biapyi7",
    "biapyi8",
  ],
  methods: {
    fasongcaipu1() {
      // 先获取添加菜谱名称
      // 传值,菜单图片
      // 再获取分类
      // 再获取菜品描述
      // 再获取用料
      // 再获取菜谱步骤

      // 再获取菜谱步骤封面

      // 再获取小贴士tip

      // 将数据保存到数据库
      var fordata = new FormData();
      fordata.append("title", this.title1);
      fordata.append("img", this.filessend2);
      fordata.append("classend", this.msng);
      fordata.append("miaoshu", this.miaoshutext);
      fordata.append("tip", this.xiaotip);
      var buzou = [];
      var yongliaoname = [];
      var yongliao = [];
      // 步骤要进行拼接，用料与步骤
      buzou.push(this.zuofa1);
      buzou.push(this.zuofa2);
      buzou.push(this.zuofa3);
      buzou.push(this.zuofa4);
      buzou.push(this.zuofa5);
      var strbuzou = buzou.toString();
      // console.log(strbuzou);
      fordata.append("strbuzou", strbuzou);
      // 用料与量
      yongliaoname.push(this.biapyi1);
      yongliao.push(this.biapyi2);
      yongliaoname.push(this.biapyi3);
      yongliao.push(this.biapyi4);
      yongliaoname.push(this.biapyi5);
      yongliao.push(this.biapyi6);
      yongliaoname.push(this.biapyi7);
      yongliao.push(this.biapyi8);
      //  console.log(yongliaoname,yongliao);
      var addallliao = [];
      for (var i = 0; i < yongliaoname.length; i++) {
        addallliao.push(`${yongliaoname[i]}-${yongliao[i]}`);
      }
      //  console.log(addallliao);

      var stryongliao = addallliao.toString();
      fordata.append("stryongliao", yongliao);
      // console.log(stryongliao);
      //  步骤图片传到数据库
      fordata.append("img1", this.filesend1);
      fordata.append("img2", this.filesend2);
      fordata.append("img3", this.filesend3);
      fordata.append("img4", this.filesend4);
      fordata.append("img5", this.filesend5);

      // console.log(buzouimgbig);
      // 时间
      let dt = new Date();
      let pushtime = `${dt.getFullYear()}/${dt.getMonth() + 1}/${dt.getDate()}`;
      fordata.append("pushtime", pushtime);
      // console.log(pushtime);

      this.$axios.post("/hxs/addshuju", fordata).then((res) => {
        console.log(res);
        // console.log(fordata, this.title1);，fordata打印不出具体值。底层实现的
        this.dataarr = res.data;
      });
      alert("发布成功！");
    },
    quxiaocaipu1() {
      alert("已存为草稿！")
    },
  },
  components: {},
  // mounted() {

  // },
};
</script>

<style lang="scss" scoped>
.fasong1 {
  margin-top: 30px;
  position: relative;
}
.fasong {
  width: 690px;
  height: 180px;
  background-color: #f5f6f5;
  margin-top: 30px;
}
.zuijabuzou {
  background-color: #c5bfb6;
  border: 1px solid gray;
  // position: absolute;
  // top: 1450px;
  // left: -23px;
  width: 140px;
  height: 40px;
  text-align: center;
  color: white;
  line-height: 40px;
  // font-size: 18px;
}
.zuijabuzou:hover {
  background-color: rgb(41, 19, 19);
  color: white;
}
.xiaotieshi {
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  font-size: 22px;
  color: black;
  font-weight: bold;
  top: 90px;
  left: 30px;
}
.xiaotieshitext {
  width: 580px;
  height: 80px;
  position: absolute;
  top: 140px;
  left: 55px;
  background-color: #f5f6f5;
  border: 0;
}
.xiaotieshitext:hover {
  background-color: rgb(250, 233, 202);
  color: rgb(104, 8, 8);
}
.fabu {
  display: flex;
  justify-content: space-between;
  width: 360px;
  height: 60px;
  margin-top: 36px;
  // background-color: brown;
}
.fabu1 {
  width: 166px;
  background-color: #dd3915;
  color: white;
  border: 0;
}
.fabu2 {
  width: 166px;
  background-color: #dd3915;
  color: white;
  border: 0;
}
</style>
